<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
       <template slot="table-action">
          <el-button type="primary" icon="el-icon-plus" @click="addExpert">新增</el-button>
       </template>
    </table-ext>
    <!-- 新增&修改弹框 -->
    <el-dialog :title="dialogUpdate?'修改':'新增' + config.title" :visible.sync="dialogFormVisible">
      <el-form :model="addOrUpdateForm" :rules="rules" ref="addOrUpdateForm" label-width="100px">
        <!-- <el-form-item label="品类" prop="offeringCode"  style="margin-bottom: 22px">
          <el-select v-model="addOrUpdateForm.offeringCode" @change="getValue" placeholder="请选择">
            <el-option v-for="item in offerOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="品类" prop="offeringName">
          <select-tree :multiple="false" ref="selectTree" v-model="addOrUpdateForm.offeringName"></select-tree>
        </el-form-item>
        <el-input v-if="false" v-model="addOrUpdateForm.offeringCode"></el-input>
        <el-input v-if="false" v-model="addOrUpdateForm.publishStatus"></el-input>
        <el-input v-if="false" v-model="addOrUpdateForm.id"></el-input>
        <el-form-item label="供应商名称:" prop="vendorName" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.vendorName"></el-input>
        </el-form-item>
        <el-form-item label="联系人:" prop="linkman" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.linkman"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="mobilePhone" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.mobilePhone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }]" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="邀请原因:" prop="description" style="margin-bottom: 22px">
          <el-input type="textarea" v-model="addOrUpdateForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addOrUpdateForm'); dialogFormVisible = false">取 消</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="resetForm('addOrUpdateForm')" v-if="!dialogUpdate">重置</el-button>
        <el-button type="primary" icon="el-icon-time" @click="addOrUpdate('addOrUpdateForm',0)">暂存</el-button>
        <el-button type="success" icon="el-icon-success" @click="addOrUpdate('addOrUpdateForm',1)">邀请</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import SelectTree from '@/components/common/select-ext/select-tree';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt,
      SelectTree
    },
    data() {
      var validateMobilePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'));
        } else {
          if (value.length != 11) {
            callback(new Error('请输入正确的手机号码'));
          }else if (!/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)) {
            callback(new Error('请输入正确的手机号码'));
          }
          callback();
        }
      };
      return {
        // 组件分装好后替换
        offerOptions: [{
            value: '1',
            label: '原材料'
          },{
            value: '2',
            label: '成品'
          },{
            value: '121',
            label: '原材料加工'
          },{
            value: '324', 
            label: '维修服务'
          }],
        // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        // 弹框属性
        addOrUpdateForm: {
          id:'',
          offeringName:'',
          publishStatus:'',
          vendorName:'',
          offeringCode: '',
          linkman: '',
          mobilePhone: '',
          email: '',
          description:''
        },
        // 验证规则
        rules: {
          offeringName: [
            { required: true, message: '请选择品类', trigger: 'blur' }
          ],
          vendorName: [
            { required: true, message: '请填写供应商名称', trigger: 'blur' },
          ],
          linkman: [
            { required: true, message: '请填写联系人', trigger: 'blur' }
          ],
          mobilePhone: [
            { validator: validateMobilePhone, trigger: 'blur',required: true }
          ]
        },
        config:{ // 页面共通配置
          title: '邀请注册', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.vendorMgt + "/vendormgt/invite/query",
              method: 'securityPost'
            },
            delete: {
              url: this.lib.config.host.vendorMgt + "/vendormgt/invite/removeInvite",
              method: 'securityPost'
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '供应商', 
          //数据字段
          key: 'vendorName', 
          //标签类型
          type: 'input' 
        },{
          label: '邀请码',
          key: 'invitationCode',
          type: 'input'
        },{
          label: '主供品类',
          key: 'offeringName',
          type: 'input'
        }],
        // 表格列定义
        columns:[{ 
          label: '操作', // 表格header
          width: '80',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            if(params.row.publishStatus == 0){
              return createElement('div', {}, 
              [createElement('el-button', {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click() {
                      _this.addOrUpdateForm = Object.assign({}, _this.addOrUpdateForm, params.row);
                      _this.dialogUpdate = true;
                      _this.dialogFormVisible = true;
                    }
                  }
                }, '修改')
              ]);
            }else{
              return createElement('div', '--');
            }
            
          }
        },{
          label: '供应商名称',
          key: 'vendorName',
          width: '220'
        },{
          label: '品类名称',
          key: 'offeringName',
          width: '220'
        },{
          label: '联系人',
          key: 'linkman',
          width: '130'
        },{
          label: '手机号',
          key: 'mobilePhone',
          width: '170'
        },{
          label: '邮箱',
          key: 'email',
          width: '220'
        },{
          label: '邀请人',
          key: 'inviteName',
          width: '160'
        },{
          label: '邀请原因',
          key: 'description',
          width: '220'
        },{
          label: '邀请日期',
          key: 'publishTime',
          width: '110'
        },{
          label: '邀请码',
          key: 'invitationCode',
          width: '100'
        }
        ]
      };
    },
    mounted(){ 
    },
    methods: {
       // 触发新增|修改
       addOrUpdate(formName,value) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addOrUpdateForm.offeringCode = this.$refs['selectTree'].getResultData().categoryCode;
            this.addOrUpdateForm.publishStatus =value;
            let url = this.lib.config.host.vendorMgt + "/vendormgt/invite/update";
            if(this.addOrUpdateForm.id == ''){
              url = this.lib.config.host.vendorMgt + "/vendormgt/invite/save";
            }
             this.axios.post(url, this.addOrUpdateForm).then((res)=>{
                this.$refs['tableExt'].refreshTable();
                this.dialogFormVisible = false;
            }).catch((e)=>{
              this.$message({
                type: 'info',
                message: '更新失败！'
              });
            });
          } else {
            return false;
          }
        });
      },
      //  getValue(value){
      //   let obj = {};
      //   obj = this.offerOptions.find((item)=>{
      //       return item.value === value;
      //   });       
      //   this.addOrUpdateForm.offeringName = obj.label;
      // },
      getValue(){ 
        this.addOrUpdateForm.offeringName = this.$refs['selectTree'].getResultData().categoryCode;
      },
      addExpert(){
        this.addOrUpdateForm.id='';
        this.dialogUpdate = false;
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetForm('addOrUpdateForm');
        });
      }
    }
  }
</script>